<template>
  <el-upload
    class="avatar-uploader"
    action=""
    list-type="picture-card"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
    :http-request="uploadImage"
  >
    <!-- (自动上传)action是上传地址 人资项目不需要 人资项目(手动上传)  -->
    <!-- show-file-list不展示列表 -->
   
    <span slot="trigger" class="title">选择文件
      <i class="el-icon-circle-close"></i> </span>
    <img v-if="value" :src="value" class="avatar" />
  </el-upload>
</template>
  
  <script>
import COS from 'cos-js-sdk-v5'
import { v4 as uuidv4 } from 'uuid'

export default {
  props: {
    // value是v-moudel传过来的
    //用户头像地址
    value: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      console.log(res);
      // 创建一个 Image 对象
      const img = new Image()
      // 将上传的图片地址赋值给 Image 对象的 src 属性
      img.src = URL.createObjectURL(file.raw)
      // 监听图片加载完成事件
      img.onload = () => {
        // 获取上传框的 DOM 对象
        const uploadEle = this.$refs.upload.$el
        // 获取上传框的宽度
        const uploadWidth = uploadEle.offsetWidth
        // 获取上传框的高度
        const uploadHeight = uploadEle.offsetHeight
        // 获取图片的宽度
        const imgWidth = img.width
        // 获取图片的高度
        const imgHeight = img.height
        // 计算图片的缩放比例
        const scale = Math.min(uploadWidth / imgWidth, uploadHeight / imgHeight)
        // 设置图片的宽度和高度，让其和上传框一样大小
        img.width = imgWidth * scale
        img.height = imgHeight * scale
        // 将上传框的 trigger 按钮替换成图片元素
        uploadEle.querySelector('.el-upload__trigger').replaceWith(img)
      }
    },
    //上传之前的回调，可以进行上传前的检查动作
    // 检查函数 判断文件的类型还有大小 return  true(继续上传)/false(停止上传)
    beforeAvatarUpload(file) {
      // jpeg png gif bmp（位图）
      //声明一个数据放置图片的类型
      //
      const isJPG = [
        'image/jpeg',
        'image/png',
        'image/gif',
        'image/bmp'
      ].includes(file.type)
      // 字节除以1024为k.再除以1024是兆
      const isLt2M = file.size / 1024 / 1024 < 5 // 5M

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG PNG GIF BMP 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 5MB!')
      }
      //返回true
      return isJPG && isLt2M
    },
    //传密钥
    uploadImage(params) {
      console.log(params.file)
      const cos = new COS({
        SecretId: 'AKIDlLJBqF8uSkpgIet20kEUVGl8KNE5wb4L',
        SecretKey: 'On353sVtCMK5f3KSSEm5NVSMH2ZrMhni'
      })
      const uniqueFilename = `${uuidv4()}_${params.file.name}`
      //传文件，拿到腾讯云返回的地址，通过input
      cos.putObject(
        {
          Bucket: 'hmcxy-1317639342', // 存储桶名称
          Region: 'ap-chengdu', // 地域名称
          Key: uniqueFilename, //文件名称
          StorageClass: 'ATANDARD', //固定值
          Body: params.file // 文件对象
        },
        (err, data) => {
          console.log(err, data)
          if (data.statusCode === 200 && data.Location) {
            //拿到腾讯云返回的地址
            //通过自定义事件将地址传出去
            this.$emit('input', 'http://' + data.Location)
          } else {
            this.$message.error(err.message) //上传失败信息
          }
        }
      )
    }
  }
}
</script>
  
  <style >
.el-upload--picture-card {
  position: relative;
  height: 70px !important;
  width: 110px;
  margin-left: -55px;
  /* line-height:50px !important; */
}
.title {
  font-size: 12px;
  position: absolute;
  top: -38px;
  right: 26px;
  z-index: 99;
}
.el-icon-circle-close {
  position: absolute;
  top: 30px;
  right: -30px;
  font-size: 16px !important;
  z-index: 99;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar {
  position: absolute;
  top: 10px;
  margin-top: -10px;
  left: 342px;
  width: 110px;
  height: 70px;

  /* display: block; */
}
</style>